<template>
  <div>
    <h1>新增学生</h1>
    学生姓名：<input type="text" v-model.lazy="addData.name" /> <br />
    学生年龄：<input type="text" v-model.lazy="addData.age" /> <br />
    学生性别： 男：
    <input type="radio" v-model="addData.gender" value="男" /> 女：<input
      type="radio"
      v-model="addData.gender"
      value="女"
    />
    <br />
    <button @click="clickAdd">确认新增</button>
  </div>
</template>

<script>
export default {
  props: ["studentData"],
  data() {
    return {
      addData: {},
      currentId: this.studentData.length
    };
  },
  methods: {
    //   确认新增
    clickAdd() {
      this.currentId++;
      this.$emit("add", { id: this.currentId, ...this.addData });
      this.addData = {
        name: "",
        age: "",
        gender: "男"
      };
    }
  }
};
</script>

<style lang="scss" scoped></style>
